<template>
    <div class="crm-receivable-container">
        <el-dialog title="回款详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="receivable-detail">
                <el-tab-pane label="回款详情" name="receivable">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="合同名称">{{ receivable?.contract?.contractName }}</el-descriptions-item>
                        <el-descriptions-item label="合同编号">{{ receivable?.contract?.contractCode }}</el-descriptions-item>
                        <el-descriptions-item label="客户名称">{{ receivable.customerName }}</el-descriptions-item>
                        <el-descriptions-item label="合同金额">{{ receivable?.contract?.contractAmount }}元</el-descriptions-item>

                        <el-descriptions-item label="回款主题">{{ receivable.receivableName }}</el-descriptions-item>
                        <el-descriptions-item label="回款日期">{{ receivable.paymentTime }}</el-descriptions-item>
                        <el-descriptions-item label="回款方式">{{ getDictionaryText('crm_payment_method', receivable.paymentMethod) }}</el-descriptions-item>
                        <el-descriptions-item label="回款金额">{{ receivable.paymentAmount }}元</el-descriptions-item>
                        
                        <el-descriptions-item label="是否开票">{{ receivable.hasInvoice ? '是' : '否' }}</el-descriptions-item>
                        <el-descriptions-item label="审核状态">{{ examineStatusText(receivable.examineStatus) }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="创建者">{{ receivable.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ receivable.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ receivable.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ receivable.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ receivable.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ receivable.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ receivable.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <el-carousel class="mt15" height="500px" v-if="receivable.attachments && receivable.attachments.length > 0">
                        <el-carousel-item v-for="item in receivable.attachments" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="500px" frameborder="0"></iframe>
                                </template>
                                <template v-else>
                                    <el-image style="max-width: auto; height: 500px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="发票详情" name="invoice" v-if="receivable.hasInvoice">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="发票代码">{{ invoice.invoiceCode }}</el-descriptions-item>
                        <el-descriptions-item label="发票号码">{{ invoice.invoiceNumber }}</el-descriptions-item>
                        <el-descriptions-item label="发票金额">{{ invoice.invoiceAmount }}元</el-descriptions-item>
                        <el-descriptions-item label="开票日期">{{ invoice.invoiceDate }}</el-descriptions-item>

                        <el-descriptions-item label="发票类型">{{ getDictionaryText('crm_invoice_type', invoice.invoiceType) }}</el-descriptions-item>
                        <el-descriptions-item label="抬头类型">{{ getDictionaryText('crm_invoice_title', invoice.invoiceTitleType) }}</el-descriptions-item>
                        <el-descriptions-item label="开票抬头">{{ invoice.invoiceTitle }}</el-descriptions-item>
                        <el-descriptions-item label="审核状态">{{ examineStatusText(invoice.examineStatus) }}</el-descriptions-item>

                        <el-descriptions-item label="购方税号">{{ invoice.buyerTaxNumber }}</el-descriptions-item>
                        <el-descriptions-item label="购方开户行">{{ invoice.buyerDepositBank }}</el-descriptions-item>
                        <el-descriptions-item label="购方开户账户">{{ invoice.buyerDepositAccount }}</el-descriptions-item>
                        <el-descriptions-item label="购方联系电话">{{ invoice.buyerTelephone }}</el-descriptions-item>

                        <el-descriptions-item label="销方税号">{{ invoice.sellerTaxNumber }}</el-descriptions-item>
                        <el-descriptions-item label="销方开户行">{{ invoice.sellerDepositBank }}</el-descriptions-item>
                        <el-descriptions-item label="销方开户账户">{{ invoice.sellerDepositAccount }}</el-descriptions-item>
                        <el-descriptions-item label="销方联系电话">{{ invoice.sellerTelephone }}</el-descriptions-item>
                        
                        <el-descriptions-item label="销方开户地址" :span="2">{{ invoice.sellerDepositAddress }}</el-descriptions-item>
                        <el-descriptions-item label="购方开户地址" :span="2">{{ invoice.buyerDepositAddress }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="创建者">{{ invoice.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ invoice.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ invoice.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ invoice.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ invoice.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ invoice.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ invoice.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <el-carousel class="mt15" height="500px" v-if="invoice.attachments && invoice.attachments.length > 0">
                        <el-carousel-item v-for="item in invoice.attachments" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="500px" frameborder="0"></iframe>
                                </template>
                                <template v-else>
                                    <el-image style="max-width: auto; height: 500px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="审核记录时间线" name="examineRecord">
                    <el-timeline>
                        <el-timeline-item
                            v-for="(item, index) in receivable?.examineRecord?.examineLoggers"
                            :key="index"
                            :timestamp="item.examineTime"
                            placement="top"
                        >
                            <el-row>
                                <el-col :span="6"><strong>审核人：</strong>{{ item.examineUserName }}</el-col>
                                <el-col :span="6"><strong>审核状态：</strong>{{ examineStatusText(item.examineStatus) }}</el-col>
                                <el-col :span="6"><strong>审核原由：</strong>{{ item.examineReason || '无' }}</el-col>
                            </el-row>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { Session } from '/@/utils/storage';
import { getCrmReceivable } from '/@/api/crm/receivable/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';
export default {
    name: 'crm/receivable/info',
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'receivable',
            receivable: {},
            invoice: {},
            dictionary: new Map(),
        });

        const examineStatusText = (status: String) => {
            const statusMap = {
                '0': '草稿',
                '1': '审核中',
                '2': '通过',
                '3': '驳回',
                '4': '撤回',
                '5': '作废'
            };
            return statusMap[status] || '未知';
        };
        const getDictionaryText = (dictLabel: String, dictValue: String) => {
            const dictionarys = state.dictionary.get(dictLabel) || [];
            return dictionarys.find(item => item.dictValue == dictValue)?.dictName;
        };

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmReceivable({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.receivable = Object.assign({}, res.data);
                        state.invoice = state.receivable?.invoice;
                    }
                });
            }
            getDictionaryByLabel({ dictLabel: 'crm_payment_method' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_payment_method', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_invoice_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_invoice_type', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_invoice_title' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_invoice_title', res.data);
                }
            });
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            for(var key in state.formData) {
                state.formData[key] = undefined;
            }
        };
        const getStorageAccessTokenUrl = (url: String) => {
            return url + '?accessToken=' + Session.get('token');
        };

        return {
            openDialog,
            closeDialog,
            examineStatusText,
            getDictionaryText,
            getStorageAccessTokenUrl,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-receivable-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>